extends ../layouts/basic

block variables
    - var pageTitle = 'ECharts FAQ'

block extra_head
    <title>FAQ - Apache ECharts (incubating)</title>

block content
    nav(class='navbar navbar-default navbar-fixed-top', role="navigation")
        include ../components/nav

    .page-info
        .container
            h1 FAQ
            p 常见问题的解答

    .page-content.single-page#faq-page
        .page-nav
            h4 常见问题
            ul
        .page-detail

            h2#ask-questions 通用问题
            h3 有技术问题怎么办？
            p 1）建议您在提问前，大致阅读一下<a href="https://echarts.apache.org/en/option.html">配置项手册</a>左侧导航，了解 ECharts 有哪些配置项，并且在相关的组件下查找是否有实现您需要功能的配置项；
            p 2）查看本页常见问题的解答；
            p 3）建议在 <a href="https://gallery.echartsjs.com/editor.html">ECharts Gallery</a> 上添加图表，复现你的问题，如果无法使用代码描述需求，可以尝试提供设计稿或画个草图；
            p 4）推荐在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问，附上图表链接。

            h3 ECharts 可以免费商用吗？
            p 可以，ECharts 基于 <a href="./license.html">Apache License 2.0</a> 开源。

            h2#axis 坐标轴
            h3 坐标轴标签显示空间不够怎么办？
            p 可以用 <a href="https://echarts.apache.org/en/option.html#xAxis.interval">interval</a> 控制每隔多少显示标签，设为 <code>0</code> 则显示所有标签。
            p 或者，可以设置 <a href="https://echarts.apache.org/en/option.html#yAxis.axisLabel.rotate">axisLabel.rotate</a>，将标签旋转一定角度。

            h3 把坐标轴设置在右侧好像没有效果？
            p 需要将 <a href="https://echarts.apache.org/en/option.html#yAxis.axisLine.onZero">onZero</a> 设为 <code>false</code> 才行。

            h3 如何强制显示坐标轴第一个/最后一个标签？
            p ECharts 3.5.2 版本起，支持 <a href="https://echarts.apache.org/en/option.html#xAxis.axisLabel.showMinLabel">axisLabel.showMinLabel</a> 以及 <a href="https://echarts.apache.org/en/option.html#xAxis.axisLabel.showMaxLabel">axisLabel.showMaxLabel</a>，分别用来控制第一个/最后一个标签是否强制显示，设为 <code>true</code> 则强制显示。
            p 如果不方便更新版本，可以参考<a href="https://gallery.echartsjs.com/editor.html?c=xry06afSje">这个例子</a>实现同样的效果。



            h2#legend 图例 legend
            h3 图例区域太大导致遮挡住图表怎么办？
            p 可以设置 <a href="https://echarts.apache.org/en/option.html#grid">grid</a> 控制图表区域位置。例如将 <code>grid.top</code> 设置得大一些，可以将绘图区域下移。
            p 在未来的版本中，我们计划会将布局做得更智能，自动处理这些遮挡问题。



            h2#line-chart 折线图
            h3 坐标轴刻度好像和数据不匹配？
            p 请检查一下是否设置了 <code>stack</code>，如果不是想做堆积折线图的话，应该将其去掉。



            h2#bar-chart 柱状图
            h3 为什么数据值很小的时候，y 轴的刻度会消失？
            p ECharts 3.5.2 版本修复了该问题。



            h2#map-chart 地图
            h3 图表上的省份名称重叠，如何修改名称的位置？
            p 可以修改地图文件（JS 或 JSON）中对应省份的 <code>cp</code> 坐标，或者通过 <code>echarts.getMap('china')</code> 修改已加载的地图数据。
            p 更详细的做法请参考：
                a(href='https://github.com/ecomfe/echarts/issues/4379#issuecomment-257765948') GitHub

            h3 其他国家的地图在哪里下载？
            p 可以在<a href="https://github.com/echarts-maps/echarts-countries-js">这里</a>下载到其他国家的地图信息。

            h3 如何获取地图的缩放事件？
            p 首先，需要将系列的 <a href="https://echarts.apache.org/en/option.html#series-map.roam">roam</a> 设置为 <code>true</code>，然后可以监听 <code>'georoam'</code> 事件。例：
            pre
                code
                    | myChart.on('georoam', function (params) {
                    |    console.log(params);
                    | });
            p 参见这个<a href="https://gallery.echartsjs.com/editor.html?c=xHyqn_rQ6g">完整的例子</a>。

            h3 如何制作自定义地图？
            p ECharts 地图在地图坐标的基础上进行过<a href="https://github.com/ecomfe/echarts/blob/8eeb7e5abe207d0536c62ce1f4ddecc6adfdf85e/src/util/mapData/rawData/encode.js">额外的编码</a>。可以使用 <a href="https://github.com/giscafer/mapshaper-plus">mapshaper-plus</a> 工具，上传自定义的 geojson 文件，生成 ECharts 可以使用的地图文件。



            h2#baidu-map 百度地图
            h3 如何结合百度地图使用 ECharts？
            ol
                li 引入 <code>echarts.js</code>、<code>bmap.js</code> 以及 <code>https://api.map.baidu.com/api?v=2.0&ak=这里填在百度开发平台注册得到的 access key</code>；
                li 在 <code>option</code> 中设置 <code>bmap</code>，参考<a href="https://gallery.echartsjs.com/editor.html?c=effectScatter-bmap">这个例子</a>；
                li 如需获得百度地图实例，可以通过 <code>chart.getModel().getComponent('bmap').getBMap()</code>，然后根据<a href="https://developer.baidu.com/map/reference/index.php?title=Class:%E6%80%BB%E7%B1%BB/%E6%A0%B8%E5%BF%83%E7%B1%BB">百度地图 API</a> 做进一步设置。
            p <a href="https://gallery.echartsjs.com/explore.html#components=bmap~sort=rank~timeframe=all~author=all">Gallery</a> 上有更多百度地图的例子，可作为参考。



            h2#gauge-chart 仪表盘
            h3 怎么设置仪表盘颜色？
            p 可以使用 <a href="https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.color">axisLine.lineStyle.color</a> 设置。



            h2#event 事件处理
            h3 如何获取图表点击等事件？
            p 参考<a href="https://echarts.apache.org/en/tutorial.html#Events%20and%20Actions%20in%20ECharts">官网教程</a>。ECharts 支持的事件类型请参考<a href="https://echarts.apache.org/en/api.html#events">相关 API</a>。



            h2#others 其他
            h3 图表为什么不显示？
            p 你可以检查以下情况：
            ul
                li <code>echarts.js</code> 是否正常被加载；
                li <code>echarts</code> 变量是否存在；
                li 调用 <code>echarts.init</code> 的时候，DOM 容器是否有宽高。

            h3 ECharts 有哪些学习资料？
            p 官网是最好的学习平台。此外，在 <a href="https://gallery.echartsjs.com">ECharts Gallery</a> 上学习别人的作品也是一个不错的选择。
            p ECharts 相关项目及资源请参见 <a href="https://github.com/ecomfe/awesome-echarts">awesome-echarts</a>。

block extra_js
    script(type='text/javascript').
        document.getElementById('nav-about').className = 'active';
